import React, {Component} from 'react';
import { Modal,Button ,Table,Icon} from 'tinper-bee';
import {vendorsTrimStr,vendorsDanger} from 'utils/config.js';
import './connectData.less';
import App from "../../layout/App";
export default class ConnectData extends Component{
    constructor(props) {
        super(props);
        this.state = {
            pkBill:"",
            turnleft:"<",
            columns:[
            { title: "序号", dataIndex: "sequence", key: "sequence",width:"50"},
            { title: "检查项名称", dataIndex: "item_name", key: "item_name",width:"180"},
            { title: "检查项描述", dataIndex: "item_content", key: "item_content",width:"200" },
            { title: "数据", dataIndex: "datas", key: "datas" ,width:"160"},
            { title: "图片数量", dataIndex: "pictures", key: "pictures",width:"60" },
         ]
        };
    }
    componentDidMount(){

    }
    close=()=> {
        this.props.close();
        this.props.changeFlag()
    };
    open=()=> {
        this.props.open()
    };
    handleTurnClick=()=>{
        this.props.changeFlag()
    };
    render(){
        let {projectName,creatorName,acceptorName,creationtime,inspectarea,procedureName}=this.props.needData;
        let {inspectstandardName,processName,check_object}=this.props.recorddata;
        return(
            <App>
                <Modal
                    show = { this.props.showModal }
                    onHide = { this.close }
                    backdrop={this.props.backdrop}
                    size={this.props.size}
                >
                    <Modal.Header>
                        <Modal.Title>
                            <div className="title">
                                {this.props.flag?<span>工序报验表单</span>:<span>施工记录表单</span>}
                                <Icon type="uf-close" className="close" onClick={this.close}/>
                            </div>
                        </Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        {this.props.flag||this.props.sgjlFlag?<div></div>:<div className="back" onClick={this.handleTurnClick}><span>{this.state.turnleft}</span>&ensp;返回</div>}
                        {this.props.flag?<div className="box">
                            <div className="li-box">
                                <div>
                                    <span>项目名称:&ensp;</span>
                                    <span>{projectName}</span>
                                </div>
                                <div>
                                    <span>验&ensp;收&ensp;人:&ensp;</span>
                                    <span>{acceptorName}</span>
                                </div>

                            </div>
                            <div className="li-box">
                                <div className="li-box-all">
                                    <span>工&ensp;&ensp;&ensp;&ensp;序:&ensp;</span>
                                    <span>{procedureName}</span>
                                </div>
                                <div className="li-box-all">
                                    <span>检查部位:&ensp;</span>
                                    <span>{inspectarea}</span>
                                </div>
                            </div>
                                <div className="li-box li-box-after">
                                    <div>
                                        <span>制&ensp;单&ensp;人:&ensp;</span>
                                        <span>{creatorName}</span>
                                    </div>
                                    <div>
                                        <span>制单日期:&ensp;</span>
                                        <span>{creationtime}</span>
                                    </div>
                                </div>
                       </div>: <div className="box">
                            <div className="li-box">
                                <div>
                                    <span>项目名称:&ensp;</span>
                                    <span>{projectName}</span>
                                </div>
                                <div>
                                    <span>工&ensp;&ensp;&ensp;&ensp;序:&ensp;</span>
                                    <span>{processName}</span>
                                </div>
                            </div>
                           <div className="li-box">
                               <div>
                                   <span>检查部位:&ensp;</span>
                                   <span>{check_object}</span>
                               </div>
                               <div>
                                   <span>质量标准:&ensp;</span>
                                   <span>{inspectstandardName}</span>
                               </div>
                           </div>
                            <div className="li-box">
                                <div>
                                    <span>制&ensp;单&ensp;人:&ensp;</span>
                                    <span>{creatorName}</span>
                                </div>
                                <div>
                                    <span>制单日期:&ensp;</span>
                                    <span>{creationtime}</span>
                                </div>
                            </div>

                        </div>}
                        {this.props.flag?<Table columns={this.props.columns}
                               data={this.props.tableData}
                               scroll={{ y: 300 }}
                               emptyText={() => '暂无数据'}
                        />:<Table columns={this.state.columns}
                                  data={this.props.sgjlData}
                                  scroll={{ y: 230 }}
                                  emptyText={() => '暂无数据'}
                        />}
                    </Modal.Body>
                </Modal>
            </App>
        )
    }
}